<template>
  <div id='info'>
    <div class='info'>
      <div class='userinfo'>
        <div
          class='userinfo-img'>
          <img ref='imgbox'
            src='/image/userimg.png'
            alt="">
        </div>
        <div
          class='userinfo-msg'>
          <h4
            class='username'>
            {{username=='undefined'?'请完善用户名':username}}
          </h4>
          <div class='phone'>
            电话:{{phone=='undefined'?'请完善电话号码':phone}}
          </div>
          <div class='email'>
            邮箱:{{email}}
          </div>
        </div>
      </div>
    </div>
    <div class='account'>
      <div
        class='useraccount'>
        <div class='money'
          @click='payfalg=true'>
          <van-icon
            name="gold-coin-o"
            size='40'
            color='#fff' />
          <div>
            我的钱包</div>
          <div>{{balance}}
          </div>
        </div>
        <div class='score'>
          <van-icon
            name="thumb-circle-o"
            size='40'
            color='#fff' />
          <div>信誉积分</div>
          <div>{{creditPoint}}
          </div>
        </div>
      </div>
    </div>
    <div class='operate'>
      <div class='operatebox'>
        <div
          @touchend='titlemsg("编辑信息")'>
          <router-link
            class='link'
            to='edit'>
            <van-icon
              name="user-circle-o"
              size='30'
              color='rgba(26, 144, 255)' />
            <span>编辑信息</span>
          </router-link>
        </div>
        <div
          @touchend='titlemsg("修改密码")'>
          <router-link
            class='link'
            to='change'>
            <van-icon
              name="browsing-history-o"
              size='30'
              color='rgba(26, 144, 255)' />
            <span>修改密码</span>
          </router-link>
        </div>
        <div
          @touchend='titlemsg("发布任务")'>
          <router-link
            class='link'
            to='publish'>
            <van-icon
              name="upgrade"
              size='30'
              color='rgba(26, 144, 255)' />
            <span>发布任务</span>
          </router-link>
        </div>
        <div
          @touchend='titlemsg("投诉任务")'>
          <router-link
            class='link'
            to='/myinfo/complaint'>
            <van-icon
              name="question-o"
              size='30'
              color='rgba(26, 144, 255)' />
            <span>投诉任务</span>
          </router-link>
        </div>
        <div @touchend='exit'>
          <router-link
            to='/login'
            class='link'>
            <van-icon
              name="close"
              size='30'
              color='rgba(26, 144, 255)' />
            <span>退出登录</span>
          </router-link>
        </div>

        <div @touchend='jqqd'>
          <router-link
            class='link'
            to=''>
            <van-icon
              name="more-o"
              size='30'
              color='rgba(26, 144, 255)' />
            <span>敬请期待</span>
          </router-link>
        </div>
        <div @touchend='jqqd'>
          <router-link
            class='link'
            to=''>
            <van-icon
              name="more-o"
              size='30'
              color='rgba(26, 144, 255)' />
            <span>敬请期待</span>
          </router-link>
        </div>
        <div @touchend='jqqd'>
          <router-link
            class='link'
            to=''>
            <van-icon
              name="more-o"
              size='30'
              color='rgba(26, 144, 255)' />
            <span>敬请期待</span>
          </router-link>
        </div>
        <div @touchend='jqqd'>
          <router-link
            class='link'
            to=''>
            <van-icon
              name="more-o"
              size='30'
              color='rgba(26, 144, 255)' />
            <span>敬请期待</span>
          </router-link>
        </div>
      </div>
    </div>
    <div class='pay'
      v-if='payfalg'
      @click.self='payfalg=false,value=null'>
      <div class='paybox'>
        <h4>充值</h4>
        <van-field name="充值金额"
          label="充值金额"
          @change="changhref"
          v-model="value"
          placeholder="金额（元）"
          :rules="[{ required: true, message: '请填写充值金额（元）',pattern }]" />
        <a :href='href'
          target="_blank"
          @click='alipay'
          class='btn'>确认充值</a>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant'
export default {
  name: 'info',
  data() {
    return {
      username: '',
      email: '',
      phone: '',
      photoId: '',
      imgUrl: '',
      balance: '',
      creditPoint: '',
      payfalg: false,
      value: '',
      href: 'http://dingrun.xyz:8890/alipay/pay',
      pattern: /\d{6}/,
    }
  },
  props: {},
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  computed: {},
  watch: {},
  created() {
    this.username = window.localStorage.getItem('username')
    this.email = window.localStorage.getItem('email')
    this.phone = window.localStorage.getItem('phone')
    this.photoId = window.localStorage.getItem('photoId')
  },
  mounted() {
    if (window.localStorage.getItem('photoId') != 'undefined') {
      this.http({
        method: 'post',
        url: '/api/getImageByExample',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        params: {
          uid: window.localStorage.getItem('uid'),
          token: window.localStorage.getItem('token'),
          imgId: window.localStorage.getItem('photoId'),
        },
      }).then((res) => {
        if (res.data.data.length) {
          this.$refs.imgbox.src = 'http://' + res.data.data[0].url
        }
      })
    }
    this.getAccount()
  },
  methods: {
    exit() {
      Dialog.confirm({
        message: ' 是否确认退出？ ',
        confirmButtonColor: 'rgba(26, 144, 255)',
      }).then(() => {
        window.localStorage.clear()
        this.$router.replace('login')
      })
    },
    jqqd() {
      Dialog.alert({
        message: ' 敬 请 期 待 ',
        confirmButtonColor: 'rgba(26, 144, 255)',
      })
    },
    titlemsg(msg) {
      window.localStorage.setItem('titlemsg', msg)
      this.$store.state.titlemsg = msg
    },
    getAccount() {
      this.http({
        method: 'post',
        url: '/api/getAccount',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        params: {
          uid: window.localStorage.getItem('uid'),
          token: window.localStorage.getItem('token'),
        },
      }).then((res) => {
        this.balance = res.data.data.balance
        this.creditPoint = res.data.data.creditPoint
      })
    },
    alipay() {
      this.getAccount()
      this.payfalg = false
      this.value = null
    },
    changhref() {
      this.href += `?uid=${window.localStorage.getItem('uid')}&value=${this.value}`
    },
  },
}
</script>

<style scoped lang='less'>
.pay {
  width: 100%;
  height: 100%;
  padding: 8rem 4rem;
  position: absolute;
  box-sizing: border-box;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.274);
  .paybox {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    h4 {
      width: 100%;
      text-align: center;
      margin-bottom: 1rem;
      margin-top: 1rem;
    }
    .btn {
      display: inline-block;
      text-align: center;
      line-height: 2rem;
      outline: none;
      border: none;
      background: rgba(26, 144, 255, 0.8);
      color: #fff;
      font-size: 0.8rem;
      width: 5rem;
      height: 2rem;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -2.5rem;
      margin-top: 2rem;
      border-radius: 10px;
    }
  }
}
#info {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8;
  position: relative;
  .info,
  .account,
  .operate {
    flex: 1;
    padding: 0 1rem;
    box-sizing: border-box;
    div {
      width: 100%;
      height: 100%;
    }
  }
  .info::after,
  .account::after {
    content: '';
    display: inline-block;
    width: 100%;
    height: 1px;
    // background-color: rgba(26, 144, 255);
  }
  .info {
    flex: 1;
    .userinfo {
      width: 100%;
      height: 100%;
      text-align: center;
      display: flex;
      align-items: center;
      .userinfo-img {
        width: 22%;
        height: 50%;
        margin-left: 1rem;
        margin-right: 1rem;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .userinfo-msg {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 80%;
        height: 100%;
        text-align: left;
        .username {
          font-size: 1.2rem;
          margin-bottom: 0.2rem;
        }
        .phone {
          height: 1rem;
          font-size: 0.6rem;
          margin-bottom: 0.1rem;
          color: #7e7e7e;
        }
        .email {
          height: 1rem;
          font-size: 0.6rem;
          color: #7e7e7e;
        }
      }
    }
  }
  .account {
    flex: 1;
    .useraccount {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
      .money {
        background-color: rgba(26, 144, 255, 0.6);
        border-right: 1px solid #bbb;
        border-bottom-left-radius: 20px;
        border-top-left-radius: 20px;
      }
      .score {
        border-left: 1px solid #bbb;
        background-color: rgba(255, 148, 26, 0.6);
        border-bottom-right-radius: 20px;
        border-top-right-radius: 20px;
      }
      .money,
      .score {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #fff;
        div {
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .van-icon {
          margin-top: 0.6rem;
        }
      }
    }
  }
  .operate {
    flex: 2;
    width: 100%;
    height: 100%;
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;

    .operatebox {
      width: 100%;
      height: 100%;
      display: flex;
      border-radius: 20px;
      flex-direction: row;
      flex-wrap: wrap;
      background-color: #fff;
      padding-top: 0.8rem;
      padding-bottom: 0.6rem;

      box-sizing: border-box;
      div {
        height: 33.33%;
        width: 33.33%;
        text-align: center;
        box-sizing: border-box;
        padding-top: 0.6rem;
        .link {
          display: inline-block;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }
      }
      span {
        margin-top: 0.4rem;
        color: rgba(26, 144, 255, 0.8);
        font-size: 0.6rem;
      }
    }
  }
}
</style>
